<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
		<title>选择支付方式</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style type="text/css">
			.content {
				width: 100%;
				height:auto !important;
			}

			.list-content {
				padding: 0 0.5rem;
				background-color: #FFFFFF;
			}

			.list-item {
				height: 2.5rem;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-webkit-flex-direction: row;
				flex-direction: row;
				justify-content: space-between;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
			}

			.list-item .pay-icon {
				width: 2.1rem;
			}

			.list-item  {
				flex: 1;
				font-size: 0.8rem;
				margin-left: 0.4rem;
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(16,29,55,1);
			}

			.pay-channel{
				flex: 1;
				font-size:0.75rem;
				margin-left: 0.75rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(89,89,89,1);
				line-height:2.5rem;
				text-shadow:0rem 0rem 0rem rgba(230,230,230,1);
			}

			.list-item .pay-icon-select {
				width: 1rem;
			}

			.aui-btn-block {
				height     : 2.3rem;
				line-height: 2.3rem;
				width      : 92%;
				margin     : auto;
				color      : #FFFFFF;
				background    :rgba(0,90,147,1);
				border-radius :0.3rem;
				font-family   :PingFangSC-Regular;
				font-weight   :400;
				color         :rgba(255,255,255,1);
				transition: 0.3s all ease
			}
	.aui-btn-block:active{
			background    :rgba(0,90,147,0.8);color:#fff
	}
			.btn-frame {
				margin: 2.5rem 0.5rem 0rem 0.5rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak="">
			<div class="content ming-bg-white aui-text-left" style="border-bottom:0.5rem solid rgba(246,246,246,1);">
				<div style="margin-left:0.75rem;width:96%;height:2.5rem;line-height:2.5rem;font-size:.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(89,89,89,1);">
					订单编号<span style="margin-right:0.75rem;float:right;font-size:0.75rem;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(46,46,46,1);">{{order_num}}</span>
				</div>
				<div class="" style="margin-left:0.75rem;width:96%;height:2.5rem;line-height:2.5rem;font-size:.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(89,89,89,1);">
					需付金额<span  style="margin-right:0.75rem;font-size:0.75rem;font-family:sans-serif;font-weight:500;color:rgba(247,48,36,1);float:right;">
						<!-- ￥{{pay_price}} -->
						{{price_format('yuan',pay_price)}}.{{price_format('fen',pay_price)}}

					</span>
				</div>
			</div>
			<div class="list-content">
				<!-- 微信支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='Wxpay'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/btn-weixin1.png" style="width:1.2rem;">
					</div>
					<div class="pay-channel">
						微信支付

					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='Wxpay'" class="pay-icon-select" src="../../image/icon/select_new.png" style="width:.95rem;">
						<img v-if="channel!='Wxpay'" class="pay-icon-select" src="../../image/icon/icon-noselect-red.png" style="width:.95rem;">
					</div>
				</div>

				<!-- 支付宝支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='Alipay'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/btn-alipay.png" style="width:1.2rem;">
					</div>
					<div class="pay-channel">
						支付宝支付
					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='Alipay'" class="pay-icon-select" src="../../image/icon/select_new.png" style="width:.95rem;">
						<img v-if="channel!='Alipay'" class="pay-icon-select" src="../../image/icon/icon-noselect-red.png"  style="width:.95rem;">
					</div>
				</div>

				<!-- 网银支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='UnionPay'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/btn-yinlian.png" style="width:1.2rem;">
					</div>
					<div class="pay-channel">
						银联支付
					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='UnionPay'" class="pay-icon-select" src="../../image/icon/select_new.png" style="width:.95rem;">
						<img v-if="channel!='UnionPay'" class="pay-icon-select" src="../../image/icon/icon-noselect-red.png" style="width:.95rem;">
					</div>
				</div>
				<!-- 余额支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='balance'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/ye.png" style="width:1.2rem;">
					</div>
					<div class="pay-channel">
						余额支付
					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='balance'" class="pay-icon-select" src="../../image/icon/select_new.png" style="width:.95rem;">
						<img v-if="channel!='balance'" class="pay-icon-select" src="../../image/icon/icon-noselect-red.png" style="width:.95rem;">
					</div>
				</div>

			</div>
			<!--<div class="btn-frame" tapmode onclick="open_win('pay','pay.html',false)">-->
			<div class="btn-frame" tapmode onclick="pay()">
				<div class="aui-btn aui-btn-block aui-font-size-16">
						确定
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				order_num: 0,
				pay_price: 0,
				channel: 'Alipay',
				order_id: 0
			},
			methods: {
				price_format: function(type, price) {
					var status = (price + '').indexOf('.')
					if (status == '-1') {
						if (type == 'yuan') {
							return price;
						}
						if (type == 'fen') {
							return '00';
						}
					}
					var price_array = (price + '').split('.')
					if (type == 'yuan') {
						return price_array[0];
					}
					if (type == 'fen') {
						var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
						return price_fen;
					}
				},
			}
		})
		apiready = function() {

			vm.order_num = $api.getStorage('orderinfo').order_num
			vm.pay_price = $api.getStorage('orderinfo').pay_price/100
			vm.order_id = $api.getStorage('orderinfo').order_id
		};

		function pay() {
		
			var channel = vm.channel
			console.log(JSON.stringify({	order_id: vm.order_id,
				order_type: channel}))
			get_data('payment/ScorePay/getOrderSign', {
				order_id: vm.order_id,
				order_type: channel
			}, function(ret) {
		  	// alert(JSON.stringify(ret))
				if(ret.status) {
					if(ret.status == '99' && ret.msg == '订单处理成功') {
						pay_res(1);
						send_event('order_chang')
						setTimeout(function() {
							close_win()
						}, 1000)
						return;
					}
					var orderinfo = ret.order;
					if(channel == 'Wxpay') {
						//console.log(JSON.stringify(ret.data.payOrder))
						var wxPay = api.require('wxPayPlus');
						wxPay.payOrder(ret.data.payOrder, function(ret, err) {
							console.log(JSON.stringify(ret))
							if(ret.status) {
								pay_res(1)
								send_event('order_chang')
								setTimeout(function() {
									close_win()
								}, 1000)
							} else {
								if(err.code == '-2')
									pay_res(0)
								setTimeout(function() {
									close_win()
								}, 1000)
							}
						});
					}
					if(channel == 'Alipay') {
						var alipay = api.require('aliPayPlus');
						alipay.payOrder({
							orderInfo: ret.data.payOrder
						}, function(ret, err) {
							if(ret.code == '9000') {
								pay_res(1)
								send_event('order_chang')
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
							} else if(ret.code == '4006') {
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
							} else if(ret.code == '4003') {
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
								//								toast('您绑定的支付宝账户被冻结或不允许支付');
							} else if(ret.code == '6000') {
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
								//								toast('支付服务正在进行升级操作');
							} else if(ret.code == '6001') {
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
								//								toast('您已取消付款');
							}
						});
					}
					if(channel == 'UnionPay') {
						var unPay = api.require('unionPay');
						unPay.pay({
							tn: ret.data.tn,
							devMode: true
						}, function(ret, err) {
							if (ret.result=='success') {
								pay_res(1)
								send_event('order_chang')
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
							}else{
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
							}
						});
					}
				}else{
					toast(ret.msg)
				}
			})
		}

		function pay_res(res, orderinfo) {
			send_event('tuan_ref')
			$api.setStorage('pay_res', res)
			open_win('pay_score', 'pay_score.html', false)
		}
	</script>

</html>
